import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { HomelistWrapper } from "./style";
import AreaItemv1 from '@/components/area-itemv1';
import AreaHeaderv1 from '@/components/area-headerv1';

interface IProps {
  children?: ReactNode;
  listDate: any[];
  title: string;
  navigatePath: string;
  morepath?: string;
  width?: string;
  isround?: number;
  urlwidth?: number;
}

const HomeList: FC<IProps> = (poprs: IProps) => {
  const { listDate, title, morepath, width = "20%", isround = 0, urlwidth = 620, navigatePath } = poprs
  return <HomelistWrapper>
    <AreaHeaderv1 title={title} morepath={morepath} />
    <div className="content-list">
      {listDate.map((item) => (
        <AreaItemv1 key={item.id} width={width} isround={isround} itemDate={item} navigatePath={navigatePath} urlwidth={urlwidth} />
      ))}
    </div>
  </HomelistWrapper>;
};

export default memo(HomeList);